import React, { useEffect, useState } from 'react'
import { useLocation, useNavigate } from 'react-router-dom'
import { Descriptions, Card, Button } from 'antd'
import { reqGetHosDetail } from '@api/hospitalList'
import { IhosDetailRes } from '@api/hospitalList/model/hospitalListTypes'

export default function HospitalListShow() {
  const navigate = useNavigate()
  // id其实就是医院的id
  const { state: id } = useLocation()
  const [detail, setDetail] = useState<IhosDetailRes>({})
  useEffect(() => {
    ;(async function () {
      const result = await reqGetHosDetail(id as number)
      setDetail(result)
    })()
  }, [])

  return (
    <Card>
      {/* column设置一行有几个Item */}
      <Descriptions title="基本信息" bordered column={2}>
        <Descriptions.Item label="医院名称">
          {detail.hospital?.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          <img
            src={'data:image/png;base64,' + detail.hospital?.logoData}
            alt=""
            width="80"
          />
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {detail.hospital?.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {detail.hospital?.param.fullAddress}
        </Descriptions.Item>
        {/* 默认一行有三个Item. span是控制当前Item占几个位置 */}
        <Descriptions.Item label="坐车路线" span={2}>
          {detail.hospital?.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={2}>
          {detail.hospital?.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions title="预约规则信息" bordered column={2} className="gap">
        <Descriptions.Item label="预约周期">
          {detail.bookingRule?.cycle}天
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {detail.bookingRule?.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {detail.bookingRule?.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {detail.bookingRule?.quitTime}
        </Descriptions.Item>
        {/* 默认一行有三个Item. span是控制当前Item占几个位置 */}
        <Descriptions.Item label="预约规则" span={2}>
          {detail.bookingRule?.rule.map((item, index) => (
            <div key={index}>{`${index + 1}. ${item}`}</div>
          ))}
        </Descriptions.Item>
      </Descriptions>
      <Button
        className="gap"
        onClick={() => {
          navigate(-1)
        }}
      >
        返回
      </Button>
    </Card>
  )
}
